<template>
  <div class="videos" ref="video">
    <div id="dplayer"></div>
  </div>
</template>

<script>
import DPlayer from 'dplayer';

export default {
  name:'DPlayer',
  data(){
    return{
      dp:''
    }
  },
  mounted(){
    // this.dp = new DPlayer({
    //     container: document.getElementById('dplayer'),
    //     screenshot: true,
    //     video: {
    //         url: 'http://pics.dadashi.cn/flash/xuequ/bbkc/x083kx01.mp4',
    //         pic: 'http://pics.dadashi.cn/flash/xuequ/guangdong/youer/30.jpg',
    //     },
    // });
  },
  methods: {
    videoPlay(url){
      this.$refs.video.style.display = 'block'
      this.dp = new DPlayer({
          container: document.getElementById('dplayer'),
          screenshot: true,
          mutex:true,
          preload: 'auto',
          video: {
              url: url
          },
      });
      this.dp.fullScreen.request('web');
      this.dp.play()
      let that =this

      this.dp.on('fullscreen', function () {
        console.log('player fullscreen');
      });
      this.dp.on('fullscreen_cancel', function () {
        console.log('player fullscreen_cancel');
        // that.dp.pause()
        // that.$refs.video.style.display = 'none'
        
      });
      this.dp.on('webfullscreen', function () {
        console.log('player webfullscreen');
      });
      this.dp.on('webfullscreen_cancel', function () {
        console.log('player webfullscreen_cancel');
        // that.dp.pause()
        // that.dp.destroy()
        // that.$refs.video.style.display = 'none'
      });
      this.dp.on('pause', function () {
        console.log('player pause');
        // that.dp.pause()
        // that.$refs.video.style.display = 'none'
      });
    }
  },
}
</script>

<style>
.videos{
  width: 3rem;
  height: 3rem;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 99999
}
</style>